<template>
  <div class="page">
    <div v-if="group.state == 'normal'">
      <div class="bg-white pd mgb-s cf">
        <div class="fl">
          <div class="fw fs-2">{{group.name}}</div>
          <div style="padding-top: 20px;">
            班主任：
            <span style="width: 22px;position: relative;top: 5px;"><avatar v-if="group.owner && group.owner.avatarUrl" :src="group.owner.avatarUrl"></avatar></span>
            {{group.owner.nickName || ''}}
          </div>
          <div style="padding-top:22px;">
            <div v-if="group.members.length > 10">
              <span v-for="(n, i) in group.members" v-if="i < 10" :key="n.id" style="width: 22px;position: relative;top: 5px;">
                <avatar :src="n.avatarUrl"></avatar>
              </span>
              等{{group.members.length}}人也加入了班级
            </div>
            <div v-else>
              已有<span v-for="(n, i) in group.members" :key="n.id" style="width: 22px;position: relative;top: 5px;">
                <avatar :src="n.avatarUrl"></avatar>
              </span>
              {{group.members.length}}人加入了班级
            </div>
          </div>
        </div>
      </div>
      <div class="pdh">
        <div class="weui-flex v-mdl bd-t bd-b pd">
          <div class="weui-flex__item">
            <input type="text" placeholder="学生名字" v-model="name" maxlength="15">
          </div>
          <div style="width:80px;" class="ta-c bd-l" :class="{'c-red': 15 - name.length <= 0, 'c-gray': 15 - name.length > 0}">
            {{15-name.length}}/15
          </div>
          <div style="width:60px;" class="ta-r bd-l">
            <a @tap="isShowFamilyRolePanel = true">{{identity}}</a>
          </div>
        </div>
      </div>
      <div class="fix-bottom bg-white">
        <button class="ui btn primary no-rounder no-border" :loading="isLoading" :class="{'disabled': !name}" @tap="onJoin">加入班级</button>
      </div>
    </div>
    <div v-if="group.state == 'disbanded'" class="ta-c pdh-xl c-gray">
      该班级已解散，如有疑问请咨询老师。
    </div>
    <pop v-model="isShowFamilyRolePanel" :slotData="slotData" :hasHeaderOpt="true" title="选择身份">
      <div class="identities ta-c">
        <a v-for="(n, i) in slotData.identities" :key="i" @tap="onIdentityChange(i)" class="bd-b">
          {{n}}
          <span v-if="i == slotData.identityIdx" class="selected-flag"><i class="if icon-toast-correct c-primary"></i></span>
        </a>
      </div>
    </pop>
    <page-common></page-common>
  </div>
</template>

<script>
import * as $group from '@/api/group'
import base from '@/mixins/base'
import Avatar from '@/components/avatar'
import { mapGetters, mapActions } from 'vuex'
import PageCommon from '@/components/page-common'
import Pop from '@/components/pop'

export default {
  mixins: [base],
  components: {Avatar, PageCommon, Pop},
  data () {
    return {
      isPageNeedAuthUser: true,
      name: '',
      identities: ['本人', '爸爸', '妈妈'],
      identityIdx: 0,
      isShowFamilyRolePanel: false,
    }
  },
  computed: {
    ...mapGetters([
      'loginer'
    ]),
    ...mapGetters('group', [
      'group'
    ]),
    identity () {
      return this.identities[this.identityIdx]
    },
    slotData () {
      return {
        identities: this.identities,
        identityIdx: this.identityIdx
      }
    }
  },
  methods: {
    ...mapActions([
      'setRole'
    ]),
    ...mapActions('group', [
      'getById'
    ]),
    onIdentityChange (idx) {
      this.identityIdx = idx
      this.isShowFamilyRolePanel = false
    },
    async onJoin () {
      try {
        if (this.isLoading) return
        if (!this.name) return
        let {groupId, forward = '', taskId = 0} = this.getParams()
        this.isLoading = true
        let role = 'user'
        if (this.identity === '爸爸') {
          role = 'father'
        } else if (this.identity === '妈妈') {
          role = 'mather'
        }
        let flag = await $group.join({groupId, name: this.name, role})
        this.isLoading = false
        wx.redirectTo({
          url: '/pages/group-index/main?isShowSideMenu=y&groupId=' + groupId
        })
      } catch (e) {
        this.$debug({err: e})
      }
    },
    async loginBack (loginer) {
      try {
        let {groupId, forward, taskId} = this.getParams()
        let group = await this.getById({groupId, cache: false})
        if (parseInt(group.owner.id) === parseInt(loginer.id)) {
          wx.redirectTo({
            url: '/pages/user-group/main?isShowSideMenu=y&groupId=' + groupId
          })
          return
        }
        this.setRole('student')
        if (!this.getIsJoined(group.members)) return
        wx.redirectTo({
          url: '/pages/group-index/main?isShowSideMenu=y&groupId=' + groupId
        })
      } catch (e) {
        this.$debug({err: e})
      }
    },
    getIsJoined (members) {
      if (members.length === 0) return false
      let userIds = members.map(n => {
        if (!n.name) return 0
        return n.userId
      })
      if (userIds.indexOf(this.loginer.id) >= 0) return true
      return false
    }
  }
}
</script>

<style scoped lang="less">
.identities {
  a {
    display: block;
    padding: 10px;
    color: #555;
    position: relative;
    .selected-flag {
      position: absolute;
      right: 32%;
      tpo: 0;
    }
  }
}
</style>
